<template>
    <section class="msite">
        <!--首页头部-->
        <HeaderTop :title="this.address.name">
          <span class="header_search" slot="left_search">
            <i class="iconfont iconsousuo"></i>
          </span>
          <span class="header_login" slot="right_login">
            <router-link class="header_login_text" v-if="!userInfo.code==1" to="/login">登录|注册</router-link>
            <router-link class="header_login_text" v-else to="/profile"><i class="iconfont iconuser"></i></router-link>
          </span>
        </HeaderTop>
        <!--首页导航-->
        <nav v-if="getCategorys.length" class="msite_nav">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item , index ) in getCategorys" :key="index">
                        <a href="javascript:" class="link_to_food" v-for="(category , index ) in item" :key="index">
                            <div class="food_container">
                                <img :src="baseUrl+category.image_url">
                            </div>
                            <span>{{category.title}}</span>
                        </a>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </nav>
        <div v-else class="msite_nav_loading">
          <img src="./images/msite_back.svg" alt="">
        </div>
        <!--首页附近商家-->
        <div class="msite_shop_list">
            <div class="shop_header">
                <i class="iconfont icon-xuanxiang"></i>
                <span class="shop_header_title">附近商家</span>
            </div>
            <ShopList></ShopList>
        </div>
    </section>
</template>

<script>
    import Swiper from "swiper"
    import 'swiper/dist/css/swiper.min.css'
    import {mapState} from 'vuex'
    import {mapGetters} from 'vuex'

    import HeaderTop from '../../components/HeaderTop/HeaderTop'
    import ShopList from '../../components/ShopList/ShopList'

    export default {
        name: "Msite",
        data (){
          return {
              title:'1',
              baseUrl:'https://fuss10.elemecdn.com'
          }
        },
        mounted () {
          console.log('111111111111')
          console.log(userInfo)
        },
        computed : {
            ...mapState(['address','userInfo']),
            ...mapGetters(['getCategorys']),
            // ...mapState(['address','categorys']),
            /*catgoryArr () {
                let {categorys} = this;
                let arr =[];
                categorys.forEach((item , index) => {
                    let num =Math.floor(index/8);
                    if(!arr[num]){
                        arr[num]=[];
                    }
                    arr[num].push(item);
                })
                console.log(arr)
                return arr;
            }*/
        },
        watch :{
            // 监视数据的变化
            getCategorys (value){
                // 监视页面异步变化完成后
                this.$nextTick(() => {
                    var mySwiper = new Swiper ('.swiper-container', {
                        loop: false, // 循环模式选项
                        // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        }
                    })
                })
            }
        },
        mounted () {


        },
        components:{
            HeaderTop,
            ShopList
        }
    }
</script>

<style lang="stylus" scoped>
    @import "../../common/stylus/mixins.styl"
    &.msite //首页
        width 100%
        .msite_nav
            bottom-border-1px(#e4e4e4)
            margin-top 45px
            height 200px
            background #fff
            .swiper-container
                width 100%
                height 100%
                .swiper-wrapper
                    width 100%
                    height 100%
                    .swiper-slide
                        display flex
                        justify-content center
                        align-items flex-start
                        flex-wrap wrap
                        .link_to_food
                            width 25%
                            .food_container
                                display block
                                width 100%
                                text-align center
                                padding-bottom 10px
                                font-size 0
                                img
                                    display inline-block
                                    width 50px
                                    height 50px
                            span
                                display block
                                width 100%
                                text-align center
                                font-size 13px
                                color #666
                .swiper-pagination
                    > span.swiper-pagination-bullet-active
                        background #02a774
        .msite_nav_loading
            border: none
            margin-top: 45px
            height: 200px
</style>
